<style lang="scss" scoped>
    .p-input{
        width: 100%;
        height: 100%;
        display: flex;
        .icon{
            width: 50px;
            height: 100%;
            display: flex;
            align-items: center;
            img{
                height: 70%;
            }
        }
        .input{
            width: calc(100% - 170px);
            height: 100%;
            box-sizing: border-box;
            padding: 3px 0;
            input{
                width: 100%;
                height: calc(100% - 6px);
                border: 0;
                outline: 0;
                font-size: 18px;
            }
        }
        .img{
            width: 120px;
            height: 100%;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>
<template>
    <div class="p-input">
        <div class="icon">
            <img :src="icon" alt="">
        </div>
        <div class="input">
            <input 
                :type="type" 
                :value="value" 
                @change="$emit('change',$event.target.value)"
                :placeholder="placeholder">
        </div>
        <div @click="$emit('toggleCode')" class="img" v-if="img != ''" v-html="img">
            
        </div>
    </div>
</template>
<script>
export default {
    name: 'p-input',
    // 组件的双向绑定
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        type: {
            type: String,
            default: 'text'
        },
        icon: {
            type: String,
            required: true,
            default: ''
        },
        value: {
            type: [String,Number],
            required: true,
            default: ''
        },
        placeholder: {
            type: String,
            default: '请输入此选项'
        },
        img: {
            type: String,
            default: ''
        }
    }
}
</script>